<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../plugins/vue.min.js"></script>
</head>
<body>
    <div id="box">
        <!-- 要求首字母大写 -->
       {{myUsername.substring(0,1).toUpperCase()+myUsername.substring(1)}}

       <!-- 计算属性   不能加小括号 -->
       <!-- 计算一次之后会有缓存 -->
       {{myComputedName}}
       {{myComputedName}}
       {{myComputedName}}


       <!-- 方法 -->
       <!-- 调用一次就会走一遍里面的逻辑 -->
        {{myMethodsName()}}
        {{myMethodsName()}}
        {{myMethodsName()}}


    </div>
    <script>
        let vm = new Vue({
            el:"#box",
            data:{
                myUsername:'huhu'
                },
                methods:{
                    myMethodsName(){
                        console.log("方法")
                        return this.myUsername.substring(0,1).toUpperCase()+this.myUsername.substring(1)
                    }

                },
                computed:{
                    // 同步
                    // 函数的写法,必须要有返回值,重视结果
                    // 计算属性,没法传参
                    myComputedName(){
                        console.log("计算属性")
                        return this.myUsername.substring(0,1).toUpperCase()+this.myUsername.substring(1)
                    }
                }
        })

       

    </script>
</body>
</html>